<template>
  <div>

    <!-- 展示数据的table -->
    <el-table
      :data="list"
      v-loading.body="listLoading"
      element-loading-text="给我一点时间" border fit highlight-current-row style="width: 100%">

      <el-table-column align="center" label="报价单id" max-width="250px">
        <template scope="scope">
          <span>{{scope.row.quote_id}}</span>
        </template>
      </el-table-column>

      <el-table-column max-width="250px" align="center" label="客户名称">
        <template scope="scope">
          <span>{{scope.row.cst_name}}</span>
        </template>
      </el-table-column>

      <el-table-column max-width="250px" align="center" label="报价单编号">
        <template scope="scope">
          <span>{{scope.row.quote_no}}</span>
        </template>
      </el-table-column>

      <el-table-column max-width="250px" align="center" label="核算单状态">
        <template scope="scope">
          <span>{{approveStepText(scope.row.approve_step)}}</span>
        </template>
      </el-table-column>

      <el-table-column align="center" label="操作" max-width="250px">
        <template scope="scope">
          <el-button type="primary"
                     @click.native='showApproveBox(scope.row.quote_id,scope.row.approve_step)'
                     size="small" icon="edit">审批</el-button>
        </template>
      </el-table-column>

    </el-table>

    <div v-show="!listLoading" class="pagination-container" style="margin-top: 30px;">
      <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page.sync="listQuery.curr_page"
                     :page-sizes="[1, 2, 3, 5]" :page-size="listQuery.page_size" layout="total, sizes, prev, pager, next, jumper" :total="total_count">
      </el-pagination>
    </div>

    <el-dialog title="审批" :visible.sync="isShowApprove" size="small" top="10%">
      <el-input
        type="textarea"
        :rows="4"
        placeholder="请输入内容"
        v-model="req_approve.approve_sugg">
      </el-input>
      <div slot="footer" class="dialog-footer">
        <el-button type="danger" @click="approve(2)">拒绝</el-button>
        <el-button type="success" @click.native="approve(1)">通过</el-button>
      </div>
    </el-dialog>

  </div>
</template>

<script>
  import { quoteList,process } from '@/api/cstOrder/quote'
  import { mapGetters } from 'vuex'

  export default {
    name: 'tabQuoteList',
    data() {
      return {
        isShowApprove:false,
        list: null,
        listLoading: true,
        total_count:null,//数据总条数
        total_page:null,//总页数
        listQuery: {
          client_type:1,
          company_id:'',
          curr_page: 1,
          page_size: 2,
          query:{
            approve_step:null,//审批状态: 10起草中，20复核，30审批，0审批结束
            cst_company_id:[],
            end_date:null,
            prod_name:null,
            quote_no:null,
            salesman:null,
            start_date:null,
            type:[],
          }
        },
        req_approve:{
          client_type:1,
          bill_id:null,
          bill_type:2,
          approve_flag:null,
          approve_man_id:null,
          approve_sugg:null,
          approve_step:null
        }
      }
    },
    computed:{
      ...mapGetters([
        'uid'
      ])
    },
    mounted() {
      this.getList()
    },
    methods: {
      approveStepText(status){
        switch (status){
          case 'step10':
            return '起草'
            break;
          case 'step11':
            return '退回起草'
            break;
          case 'step20':
            return '复核'
            break;
          case 'step30':
            return '审批'
            break;
          case 'step0':
            return '审批结束'
          default:
            return '未知'
            break;
        }
      },
      getList() {
        this.listLoading = true
        quoteList(this.listQuery).then(res => {
          this.list = res.quote_list
          this.total_count = res.total_count
          this.total_page = res.total_page
          this.listLoading = false
        })
      },
      handleSizeChange(val) {
        this.listQuery.page_size = val
        this.getList()
      },
      handleCurrentChange(val) {
        this.listQuery.curr_page = val
        this.getList()
      },
      showApproveBox(quoteId,approveStep){
        this.req_approve.approve_sugg = ''
        this.req_approve.bill_id = quoteId
        this.req_approve.approve_step = approveStep
        this.isShowApprove = true
      },
      approve(flag){
        this.req_approve.approve_flag = flag
        this.req_approve.approve_man_id = this.uid
        if(this.req_approve.approve_sugg){
          process(this.req_approve)
            .then(res => {
              this.$message({
                type:'success',
                message:'审批成功'
              })
              this.listQuery.curr_page = 1
              this.getList()
              this.isShowApprove = false
            })
            .catch(err => {
              console.log(err)
              this.$message.error('审批失败')
            })
        }else{
          this.$message.error('请填写审批意见!')
        }
      }
    }
  }
</script>

<style lang="scss">
  .my-autocomplete {
    li {
      line-height: normal;
      padding: 7px;

      .name {
        text-overflow: ellipsis;
        overflow: hidden;
      }

      .highlighted .addr {
        color: #ddd;
      }
    }
  }
</style>
